<template>
  <dt-modal-info ref="info" :line-number="3" :width="800" :title="title">
    <div slot="bottom">
      <Tabs
        v-if="curState == 'SUBSCRIPTION' || curState == 'CONTRACT'"
        type="card"
        v-model="otherState"
        :animated="false"
        @on-click="onChangeOtherTab"
        name="logOtherTab">
        <TabPane label="套数目标" name="NUMBER" tab="logOtherTab"></TabPane>
        <TabPane label="金额目标" name="AMOUNT" tab="logOtherTab"></TabPane>
        <TabPane label="面积目标" name="AREA" tab="logOtherTab"></TabPane>
      </Tabs>
      <dt-grid ref="table" :onFetch="onFetch" :height="400" />
    </div>
  </dt-modal-info>
</template>

<script>
  import column from '../opt/logColumn.js'
  import logOpt from '../opt/logOpt'
  import targetApi from '@/biz/buildingManagement/target'

  export default {
    data() {
      return {
        title: '',
        curState: '',
        info: {},
        otherState: 'NUMBER',
        oldotherState: 'NUMBER',
        type: ''
      }
    },
    methods: {
      onChangeOtherTab(val) {
        if (val == this.oldotherState) return false
        this.oldotherState = val
        this.init()
      },
      show(data) {
        this.otherState = data.otherState || 'NUMBER'
        this.oldotherState = data.otherState || 'NUMBER'
        this.title = data.title
        this.info = data
        this.curState = data.curState
        this.type = data.type
        if (data.type == 'case') {
          this.$refs.info.show()
        } else {
          this.$refs.info.show(new logOpt(this), this.info)
        }
        this.init()
      },
      init() {
        this.$refs.table.init(this, new column(this))
        this.$refs.table.fetch()
      },
      getType(tabsType, otherState) {
        let type = ''
        switch (tabsType) {
          case 'CLUETARGET':
            type = 1
            break
          case 'VISITOR':
            type = 2
            break
          case 'SUBSCRIPTION':
            if (otherState == 'NUMBER') {
              type = 3
            } else if (otherState == 'AMOUNT') {
              type = 4
            } else if (otherState == 'AREA') {
              type = 5
            }
            break
          case 'CONTRACT':
            if (otherState == 'NUMBER') {
              type = 6
            } else if (otherState == 'AMOUNT') {
              type = 7
            } else if (otherState == 'AREA') {
              type = 8
            }
            break
          case 'PAYMENT':
            type = 9
            break
          default:
            type = ''
            break
        }
        return type
      },
      onFetch() {
        let params = {
          settingId: this.info.settingId,
          type: this.getType(this.curState, this.otherState)
        }
        if (this.type == 'user') params.userId = this.info.userId
        return targetApi.gettargetLogList(params, this.type).then((res) => {
          return res
        })
      }
    }
  }
</script>

<style lang="scss" scoped></style>
